<template>
  <div class="order-address">
    <div class="title">
      配送至:
    </div>
    <div class="nothing" @click="addAddress" v-if="!address || address.length === 0">
      暂无收货地址, 请去<span>添加</span>
    </div>
    <div class="address" v-else>
      <ul class="list">
        <template v-for="(item, index) in address">
          <li
            class="list-item"
            :key="index"
            @click="selectedAddress(item)"
            v-if="index < 1 || !hide"
          >
            <div class="selected">
              <!-- <cube-checkbox v-model="item.selected" :option="{label: ''}" @input="selectedAddress(item)" />-->
              <cube-checkbox v-model="item.selected" :option="{label: ''}" />
            </div>
            <div class="desc" v-html="addressText(item)"></div>
          </li>
        </template>
        <li class="add" @click="addAddress" v-if="!hide">
          <span>添加新地址</span>
          <span class="manage" @click.stop="$router.push('/service/address-list')">我的地址管理</span>
        </li>
      </ul>
      <div class="hide" @click="changeHide">
        <span class="cubeic-pulldown" v-if="hide"></span>
        <span class="cubeic-pullup" v-else></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderAddress',
  props: ['address'],
  filters: {
    cityText(address) {
      let text
      text = `<p><span class="left">收件人姓名:</span><span class="right">${address.nickname}</span></p>`
      text += `<p><span class="left">收件电话:</span><span class="right color">${address.mobile}</span></p>`
      text += `<p><span class="left">地址:</span>
            <span class="right">${address.city.province}, ${address.city.city}, ${address.city.area}</span></p>`
      text += `<p><span class="left">详细地址:</span>
            <span class="right info">${address.address}</span></p>`
      return text
    }
  },
  data() {
    return {
      // hide: false
      hide: true
    }
  },
  methods: {
    addressText(item) {
      return this.$options.filters.cityText(item)
    },
    addAddress() {
      // -2 => back order
      this.$router.push('/service/address-edit/-2')
    },
    selectedAddress(item) {
      this.$emit('selectedAddress', item)
    },
    changeHide() {
      this.hide = !this.hide
      this.$emit('hideAddress')
    }
  }
}
</script>

<style scoped lang="stylus">
.order-address
  margin 10px
  padding 15px 10px
  background white
  border-radius 10px
  .title
    font-weight 700
    text-align left
    padding-bottom 10px
  .nothing
    height 25px
    line-height 25px
    span
      color red
  .address
    margin 10px
    //position relative
    .list
      .list-item
        margin-bottom 10px
        line-height 1.2em
        display flex
        border-bottom 1px solid #eee
        padding 10px 0
        .selected
          width 50px
          font-size 20px
          //background red
          padding-top 15px
        .desc
          flex 1
          text-align left
          padding-left 10px
          //background blue
          ::v-deep
            p
              line-height 20px
              display flex
              .left
                width 70px
                font-weight 700
              .right
                flex 1
                &.color
                  color red
                &.info
                  word-break break-word
      .add
        color red
        margin-top 30px
        margin-bottom 20px
        span
          display inline
          background $main_color
          padding 5px 15px
          color white
          border-radius 10px
        .manage
          margin-left 10px
    .hide
      //position absolute
      //background red
      text-align center
      height 30px
      line-height 30px
      font-size 30px
      color $main_color
</style>
